@officesdk/design 0.2.6 → 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
@@ -386,12 +510,12 @@ interface SliderProps {
 declare const Slider: React$1.FC<SliderProps>;
 
 type InputSize = 'mini' | 'small' | 'medium' | 'large';
-type LineType$1 = 'outlined' | 'underlined' | 'borderless';
+type LineType = 'outlined' | 'underlined' | 'borderless';
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     /**
      * Input line type
      */
-    lineType?: LineType$1;
+    lineType?: LineType;
     /**
      * Input size
      */
@@ -530,110 +654,6 @@ declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps &
  */
 declare const UnderlinedInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "lineType"> & React$1.RefAttributes<HTMLInputElement>>;
 
-type LineType = '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;
-    /**
-     * 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;
-}
-/**
- * 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;

package/dist/components/cjs/index.js

@@ -1864,7 +1864,10 @@ var init_NumberInput = __esm({
       useThousandsSeparator = false,
       onChange,
       className,
-      style
+      style,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onInputChange
     }) => {
       const config = exports.useUIConfig();
       const locale = config?.locale ?? "en-US";
@@ -1964,29 +1967,44 @@ var init_NumberInput = __esm({
           setDisplayValue(formatValueForEdit(clampedValue));
         }
       }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit]);
-      const handleInputChange = React3.useCallback((e) => {
-        setDisplayValue(e.target.value);
-      }, []);
-      const handleBlur = React3.useCallback(() => {
-        setIsFocused(false);
-        const trimmedValue = displayValue.trim();
-        if (trimmedValue === "") {
-          handleValueChange(void 0);
-          setDisplayValue("");
-        } else {
-          const parsed = parseValue(trimmedValue);
-          if (parsed !== null) {
-            const preciseValue = applyPrecision(parsed);
-            handleValueChange(preciseValue);
+      const handleInputChange = React3.useCallback(
+        (e) => {
+          const inputValue = e.target.value;
+          setDisplayValue(inputValue);
+          const trimmed = inputValue.trim();
+          const parsedValue = trimmed === "" ? void 0 : parseValue(trimmed) ?? void 0;
+          onInputChange?.(inputValue, parsedValue);
+        },
+        [parseValue, onInputChange]
+      );
+      const handleBlur = React3.useCallback(
+        (e) => {
+          setIsFocused(false);
+          const trimmedValue = displayValue.trim();
+          if (trimmedValue === "") {
+            handleValueChange(void 0);
+            setDisplayValue("");
           } else {
-            setDisplayValue(formatValue(value));
+            const parsed = parseValue(trimmedValue);
+            if (parsed !== null) {
+              const preciseValue = applyPrecision(parsed);
+              handleValueChange(preciseValue);
+            } else {
+              setDisplayValue(formatValue(value));
+            }
           }
-        }
-      }, [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision]);
-      const handleFocus = React3.useCallback(() => {
-        setIsFocused(true);
-        setDisplayValue(formatValueForEdit(value));
-      }, [value, formatValueForEdit]);
+          onBlurProp?.(e);
+        },
+        [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision, onBlurProp]
+      );
+      const handleFocus = React3.useCallback(
+        (e) => {
+          setIsFocused(true);
+          setDisplayValue(formatValueForEdit(value));
+          onFocusProp?.(e);
+        },
+        [value, formatValueForEdit, onFocusProp]
+      );
       const handleKeyDown = React3.useCallback(
         (e) => {
           if (e.key === "ArrowUp") {
@@ -2104,7 +2122,8 @@ var init_SpinButton = __esm({
       parser,
       onChange,
       className,
-      style
+      style,
+      inputProps
     }) => {
       const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
@@ -2145,6 +2164,7 @@ var init_SpinButton = __esm({
           precision,
           formatter,
           parser,
+          ...inputProps,
           onChange: handleValueChange
         }
       ));
@@ -3675,6 +3695,9 @@ Tooltip.displayName = "Tooltip";
 
 // src/ToolbarButton/ToolbarButton.tsx
 init_styled();
+var ArrowDownIcon = () => {
+  return /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M8.1858 9.79353C8.08649 9.90387 7.91346 9.90387 7.81415 9.79353L4.77549 6.41724C4.6307 6.25636 4.74487 6 4.96132 6L11.0386 6C11.2551 6 11.3693 6.25636 11.2245 6.41724L8.1858 9.79353Z", fill: "#41464B", fillOpacity: "0.6" }));
+};
 var ToolbarButtonContainer = exports.styled.div`
   display: inline-flex;
   align-items: center;
@@ -3975,7 +3998,7 @@ var ToolbarButton = ({
         },
         renderIcon(),
         renderLabel(),
-        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(icons.ArrowDownIcon, null))
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -4011,7 +4034,7 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(icons.ArrowDownIcon, null))
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowDownIcon, null))
       )
     );
   }