Controls: Add range validation in Number Control

code/addons/docs/src/blocks/controls/Number.tsx

@@ -49,11 +49,31 @@ export const NumberControl: FC<NumberProps> = ({
       if (Number.isNaN(result)) {
         setParseError(new Error(`'${event.target.value}' is not a number`));
       } else {
-        onChange(result);
+        // Initialize the final value as the user's input
+        let finalValue = result;
+
+        // Clamp to minimum: if finalValue is less than min, use min
+        if (typeof min === 'number' && finalValue < min) {
+          finalValue = min;
+        }
+
+        // Clamp to maximum: if finalValue is greater than max, use max
+        if (typeof max === 'number' && finalValue > max) {
+          finalValue = max;
+        }
+
+        // Pass the clamped final value to the onChange callback
+        onChange(finalValue);
+        // Clear any previous parse errors
         setParseError(null);
+
+        // If the value was clamped, update the input display to the final value
+        if (finalValue !== result) {
+          setInputValue(String(finalValue));
+        }
       }
     },
-    [onChange, setParseError]
+    [onChange, setParseError, min, max]
   );
 
   const onForceVisible = useCallback(() => {

code/frameworks/sveltekit/tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "storybook/internal/*": ["../../lib/cli/core/*"]
-    },
+    }
   },
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"]

code/lib/eslint-plugin/docs/rules/no-stories-of.md

@@ -14,7 +14,6 @@ Examples of **incorrect** code for this rule:
 
 ```js
 import { storiesOf } from '@storybook/react';
-
 import Button from '../components/Button';
 
 storiesOf('Button', module).add('primary', () => <Button primary />);