@officesdk/design 0.2.5 → 0.2.7

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

@@ -73,6 +73,125 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: React$1.FC<ButtonProps>;
 
+type LineType$1 = 'outlined' | 'underlined' | 'borderless';
+interface NumberInputProps {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Default value
+     */
+    defaultValue?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment/decrement
+     */
+    step?: number;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'large';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show alert state (red border)
+     */
+    alert?: boolean;
+    /**
+     * Number of decimal places
+     */
+    precision?: number;
+    /**
+     * Format the display value
+     */
+    formatter?: (value: number) => string;
+    /**
+     * Parse the input value
+     */
+    parser?: (displayValue: string) => number;
+    /**
+     * Unit text to display after the input
+     */
+    unit?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether to show step buttons (increment/decrement)
+     * @default true
+     */
+    showStepButtons?: boolean;
+    /**
+     * Trigger mode for showing step buttons
+     * - 'normal': always show (default)
+     * - 'hover': show only on hover
+     * @default 'normal'
+     */
+    showStepButtonsTrigger?: 'hover' | 'normal';
+    /**
+     * Input line type
+     * - 'outlined': with full border (default)
+     * - 'underlined': with bottom border only
+     * - 'borderless': no border
+     * @default 'outlined'
+     */
+    lineType?: LineType$1;
+    /**
+     * Whether to use thousands separator in display
+     * @default false
+     */
+    useThousandsSeparator?: boolean;
+    /**
+     * Callback when value changes
+     * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
+     * @param rawValue - The original input value before clamping (can be undefined if empty)
+     */
+    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Callback when input receives focus
+     */
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when input value changes during typing
+     * Useful for real-time validation (e.g., check if value is multiple of 3)
+     * @param inputValue - The raw input string
+     * @param parsedValue - The parsed number value (undefined if invalid)
+     */
+    onInputChange?: (inputValue: string, parsedValue: number | undefined) => void;
+}
+/**
+ * NumberInput Component
+ *
+ * A numeric input with increment/decrement buttons
+ *
+ * @example
+ * <NumberInput value={35} onChange={(val) => console.log(val)} />
+ */
+declare const NumberInput: React$1.FC<NumberInputProps>;
+
 interface SpinButtonProps {
     /**
      * Current value
@@ -134,6 +253,11 @@ interface SpinButtonProps {
      * Custom style
      */
     style?: React$1.CSSProperties;
+    /**
+     * Additional props passed to the internal NumberInput component
+     * Allows customizing unit, placeholder, lineType, showStepButtons, etc.
+     */
+    inputProps?: Partial<Omit<NumberInputProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'size' | 'disabled' | 'alert' | 'precision' | 'formatter' | 'parser' | 'onChange' | 'className' | 'style'>>;
 }
 /**
  * SpinButton Component - Spin Button
@@ -530,89 +654,6 @@ declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps &
  */
 declare const UnderlinedInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "lineType"> & React$1.RefAttributes<HTMLInputElement>>;
 
-interface NumberInputProps {
-    /**
-     * Current value
-     */
-    value?: number;
-    /**
-     * Default value
-     */
-    defaultValue?: number;
-    /**
-     * Minimum value
-     */
-    min?: number;
-    /**
-     * Maximum value
-     */
-    max?: number;
-    /**
-     * Step increment/decrement
-     */
-    step?: number;
-    /**
-     * Size variant
-     */
-    size?: 'small' | 'large';
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show alert state (red border)
-     */
-    alert?: boolean;
-    /**
-     * Number of decimal places
-     */
-    precision?: number;
-    /**
-     * Format the display value
-     */
-    formatter?: (value: number) => string;
-    /**
-     * Parse the input value
-     */
-    parser?: (displayValue: string) => number;
-    /**
-     * Unit text to display after the input
-     */
-    unit?: string;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether to show step buttons (increment/decrement)
-     * @default true
-     */
-    showStepButtons?: boolean;
-    /**
-     * Callback when value changes
-     * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
-     * @param rawValue - The original input value before clamping (can be undefined if empty)
-     */
-    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Custom style
-     */
-    style?: React$1.CSSProperties;
-}
-/**
- * NumberInput Component
- *
- * A numeric input with increment/decrement buttons
- *
- * @example
- * <NumberInput value={35} onChange={(val) => console.log(val)} />
- */
-declare const NumberInput: React$1.FC<NumberInputProps>;
-
 interface IconSize {
     width: string;
     height: string;